<template>
  <div style="padding-top: 20px; width: 70%; margin: 0 auto">
    <div style="margin-bottom: 20px">
      <el-select v-model="data.typeId" placeholder="请选择宠物用品分类" size="large"
                 style="width: 200px; margin-right: 10px">
        <el-option v-for="type in data.typeList" :key="type.id" :label="type.name" :value="type.id"></el-option>
      </el-select>
      <el-input v-model="data.name" size="large" style="width: 500px; margin-right: 10px"
                placeholder="请输入宠物用品名称"></el-input>
      <el-button size="large" type="primary" @click="load">搜索</el-button>
      <el-button size="large" type="info" @click="reset">重置</el-button>
    </div>

    <div style="margin: 20px 0" v-if="data.total > 0">
      <el-row :gutter="20">
        <el-col :span="6" v-for="goods in data.tableData" :key="goods.id">
          <div class="card" style="padding: 0; border-radius: 5px; overflow: hidden; margin-bottom: 20px">
            <img :src="goods.image" alt="" style="width: 100%; height: 200px">
            <div style="padding: 10px">
              <div style="font-size: 20px; margin-bottom: 10px; display: flex; align-items: center">
                <el-tag type="success">售卖中</el-tag>
                <span style="font-weight: bold; margin-left: 5px; flex: 1; width: 0" class="line1">{{
                    goods.name
                  }}</span>
              </div>
              <div style="display: flex; align-items: center; justify-items: center; margin: 15px 0">
                <div style="font-size: 18px; color: red; flex: 1">￥{{ goods.price }}</div>
                <div style="font-size: 15px; color: orange;flex: 1">库存：{{ goods.store }}</div>
                <div style="flex: 1">
                  <el-button @click="view(goods)" type="primary" plain size="small">查看详情</el-button>
                </div>
              </div>
              <div style="display: flex; align-items: center">
                <div style="flex: 1">
                  <el-input-number v-model="goods.num" :min="1" style="width: 100px" size="small"></el-input-number>
                </div>
                <div>
                  <el-button :disabled="goods.store == null || goods.store < 1" @click="addCart(goods)" type="danger" size="small">加入购物车</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="padding: 20px; text-align: center; color: red" v-else>暂无搜索结果...</div>

    <div style="margin-top: 20px" v-if="data.total > 0">
      <el-pagination
          @current-change="load"
          @size-change="handleSizeChange"
          background layout="total, prev, pager, next, jumper, sizes"
          :page-sizes="[1, 3, 5, 10, 15, 20, 30]"
          :page-size="data.pageSize"
          v-model:current-page="data.pageNum"
          :total="data.total"/>
    </div>

    <el-dialog title="宠物用品详情" v-model="data.goodsVisible" width="40%" destroy-on-close>
      <div style="padding: 20px; color: #333">
        <div style="text-align: center; margin-bottom: 10px"><img style="width: 50%" :src="data.goods.image" alt=""></div>
        <div style="display: flex; align-items: center; margin-bottom: 10px">
          <el-tag type="success">售卖中</el-tag>
          <span style="font-size: 20px; font-weight: bold; margin-left: 5px">{{ data.goods.name }}</span>
        </div>
        <div style="margin: 10px 0"><span style="color: #666">宠物店名称：</span>{{ data.goods.shopName }}</div>
        <div style="margin: 10px 0"><span style="color: #666">宠物用品销量：</span>{{ data.goods.sale }}</div>
        <div style="margin: 10px 0"><span style="color: #666">宠物用品库存：</span><span style="color: orange">{{ data.goods.store }}</span></div>
        <div style="margin: 10px 0"><span style="color: #666">宠物用品类型：</span>{{ data.goods.typeName }}</div>
        <div style="margin: 10px 0; text-align: justify; line-height: 20px"><span style="color: #666">宠物用品简介：</span>{{ data.goods.descr }}</div>
        <div style="margin: 10px 0;"><span style="color: #666">宠物用品价格：</span><span style="font-size: 18px; color: red">￥{{ data.goods.price }}</span></div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.goodsVisible = false">关 闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { reactive } from "vue";
  import request from "@/utils/request.js";
  import {ElMessage} from "element-plus";

  const data = reactive({
    typeList: [],
    typeId: null,
    name: null,
    pageNum: 1,
    pageSize: 5,
    total: null,
    tableData: [],
    goods: {},
    goodsVisible: false
  })

  const view = (goods) => {
    data.goodsVisible = true
    data.goods = goods
  }

  request.get('/goodsType/query/all').then(res => {
    if (res.code === '200') {
      data.typeList = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })

  const load = () => {
    request.get('/goods/pageQuery', {
      params: {
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        typeId: data.typeId,
        name: data.name,
        status: '上架'
     }
    }).then(res => {
      if (res.code === '200') {
        data.tableData = res.data?.list || []
        data.total = res.data?.total
        data.tableData.forEach(goods => {
          goods.num = 1
        })
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
  load()

  const reset = () => {
    data.typeId = null;
    data.name = null;
    load()
  }

  const handleSizeChange = (newPageSize) => {
    data.pageSize = newPageSize
    data.pageNum = 1
    load()
  }

  // 加入购物车
  const addCart = (goods) => {
    request.post('/cart/add', {
      goodsId: goods.id,
      num: goods.num
    }).then(res => {
      if(res.code === '200') {
        ElMessage.success('加入购物车成功')
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

</script>

<style>
</style>